<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>聊天室</title>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
	<div class="main">
		<div class="main-top">
			socket.io demo
		</div>
		<div class="main-body">
			<section class="chatRoomInfo">
				<div class="info">当前共有<span class="chatNum">0</span>人在线。在线列表:&nbsp;<span class="chatList"></span></div>
			</section>
			<!--<section class="chatRoomTip">
				<div>子木加入到聊天室</div>
			</section>
			<section class="user clearfix">
				<span>子木</span>
				<div>
					测试测试测试测试测试测试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试
				</div>
			</section>
			<section class="server clearfix">
				<span>子木</span>
				<div>
					测试测试测试
				</div>
			</section>-->
		</div>
		<div class="main-footer clearfix">
			<div class="input">
				<input type="text" name="msg" id="msg" value="" />
			</div>
			<button type="button" class="send">发送</button>
		</div>
	</div>
	<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/socket.io.js" type="text/javascript" charset="utf-8"></script>
	<script>
		/*按钮点击效果*/
        $('.send').mousedown(function(){
            $(this).css({'background':"#007aff",'color':"#ffffff"});
        })
        $('.send').mouseup(function(){
            $(this).css({'background':"#e8e8e8",'color':"#ffffff"});
        })
		/*socket*/
        window.onload=function () {
              var username=prompt('请输入您的姓名');
              if (!username){
                  alert('姓名必填');
                  history.go(0);
              }
//          username="子木";
            userId=genUid();
            var userInfo={
                'userid':userId,
                'username':username
			};
            //连接socket后端服务器
            var socket=io.connect("ws://127.0.0.1:3000");
            //通知用户有用户登录
            socket.emit('login',userInfo);
            //监听新用户登录
			socket.on('login',function (o) {
                updateMsg(o, 'login');
           	});
			//监听用户退出
            socket.on('logout',function (o) {
                updateMsg(o, 'logout');
            });
			//发送消息
			socket.on('message',function (obj) {
				if(obj.userid==userId) {
				    var MsgHtml='<section class="user clearfix">'
										+'<span>'+obj.username+'</span>'
										+'<div>'+obj.content+'</div>'
									 +'</section>';
				}else{
                    var MsgHtml='<section class="server clearfix">'
									     +'<span>'+obj.username+'</span>'
									     +'<div>'+obj.content+'</div>'
									  +'</section>';
				}
				$('.main-body').append(MsgHtml);
				$('.main-body').scrollTop(99999);
            })
			$('.send').click(function () {
				var content=$('input[name="msg"]').val();
				if (content){
                    var obj={
                        'userid':userId,
                        'username':username,
						'content':content
                    }
                    socket.emit('message',obj);
                    $('input[name="msg"]').val("");
				}
            })

        }

        /*用户id生成*/
        function  genUid() {
            return new Date().getTime()+""+Math.floor(Math.random()*899+100);
        }
        function logout(){
        	socket.disconnect();
        	location.reload();
        }
        /*监听函数*/
        function updateMsg(o,action) {
            //当前在线列表
            var onlineUser=o.onlineUser;
            //当前在线数
            var onlineCount=o.onlineCount;
            //新加用户
            var user=o.user;
            //更新在线人数
            var userList='';
            var separator = '';
            for(key in onlineUser){
                userList+=separator+onlineUser[key];
                separator = '、';
            }
            //跟新房间信息
            $('.chatNum').text(onlineCount);
            $('.chatList').text(userList);
            //系统消息
            if(action=='login'){
	            var sysHtml='<section class="chatRoomTip"><div>'+user.username+'进入聊天室</div></section>';
            }
            if(action=="logout"){
            	var sysHtml='<section class="chatRoomTip"><div>'+user.username+'退出聊天室</div></section>';
            }
            $(".main-body").append(sysHtml);
            $('.main-body').scrollTop(99999);
        }
	</script>
</body>
</html>